<template>
  <div>分页</div>
  <el-pagination
    :current-page="props.page"
    :page-size="props.size"
    :page-sizes="[10, 20, 50, 100]"
    layout="sizes, prev, pager, next"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script lang='ts' setup>
const props = defineProps({
  page: { // 页码
    type: Number,
    default: 1
  },
  size: { // 每页大小
    type: Number,
    default: 10
  },
  total: { // 总数
    type: Number,
    default: 0
  },
  loadList: {
    type: Function,
    default: () => {}
  }
})

const emit = defineEmits(['update:page', 'update:size'])

const handleSizeChange = (page: number) => {
  emit('update:page', page)
  props.loadList()
  console.log(`${page} items per page`)
}
const handleCurrentChange = (size: number) => {
  emit('update:page', 1)
  emit('update:size', size)
  props.loadList()
  console.log(`current page: ${size}`)
}
</script>

<style lang='scss' scoped>
// .demo-pagination-block + .demo-pagination-block {
//   margin-top: 10px;
// }
// .demo-pagination-block .demonstration {
//   margin-bottom: 16px;
// }
.el-pagination {
  position: absolute;
  right: 20px;
}
</style>
